<template>
	<!-- 我的订单(回收员中心) -->
	<view class="myTakOrder">
		<scroll-view scroll-x="true" class="wasteScroll" :scroll-into-view="scrollIntoIndex">
			<view class="slider" v-for="(item,index) in topbar" :key="index" @tap="changTab(item.id)"
				:id="'top'+item.id">
				<text :class='tabbarIndex===item.id?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<view class="takOrder-main">
			<view class="null" v-if="orderList.length==0">
				<none></none>
			</view>
			<view class="main-content" v-else>
				<!-- 待回收/已回收 -->
				<cecyclerOrder v-if="tabbarIndex==1||tabbarIndex==2" :orderList="orderList" :tabbarIndex="tabbarIndex" @cancelEnd="cancelEnd" :ispack="ispack" @updateshoice="updateshoice"></cecyclerOrder>
				<!-- 待打包 -->
				<view v-if="tabbarIndex==3" class="tobePacked" v-for="(item,index) in orderList" :key="index">
					<view class="tobePacked-main">
						<view>订单编号:{{item.logno}}</view>
						<view class="listItems">
							<text class="line">————</text> 
							物品清单
							<text class="line">————</text>
						</view>
						<view class="tobePacked-type" v-for="(i,k) in item.content" :key="k">
							<view class="type-title">{{i.firstVal}},{{i.secondVal}}</view>
							<view class="type-content">
								<view class="content-number num">数量：{{i.number}}{{i.unit}}</view>
								<view class="content-number">回收币：{{i.user_price}}<text>/</text>{{i.unit}}</view>
								<view>小计：{{i.price}}回收币</view>
							</view>
						</view>
						<view class="type-footer">
							<view class="footer-text">
								<view class="sumText">共计支出 - {{item.total}}回收币</view>
								<view class="profitText">预计利润 - <text class="cions">-{{item.total}}回收币</text></view>
							</view>
							<view class="writeQrcode" @tap="qrCode(item)">核销二维码</view>
						</view>
						<popup v-show="isPopup" openRouter="qrcode" :qrcodeImg="qrcodeImg" :isPopup="isPopup" @changeData="hidePopup"></popup>
					</view>
				</view>
				<!-- 已完成 -->
				<view class="finished" v-if="tabbarIndex==4" v-for="(item,index) in orderList" :key="index">
					<view class="finished-main">
						<view class="finishedMain-header">
							<view class="logno">订单编号：{{item.logno}}</view>
							<view class="time">完成时间：{{item.finishtime}}</view>
							
						</view>
						<view class="finishedMain-content">
							<view class="listItems">
								<text class="line">————</text> 
								核验清单
								<text class="line">————</text>
							</view>
							<view class="finishedMain-type">
								<view class="tobePacked-type" v-for="(i,k) in item.content" :key="k">
									<view class="type-title">{{i.firstVal}},{{i.secondVal}}</view>
									<view class="type-content">
										<view class="content-number num">数量：{{i.number}}{{i.unit}}</view>
										<view class="content-number">回收币：{{i.user_price}}<text>/</text>{{i.unit}}</view>
										<view>小计：{{i.price}}回收币</view>
									</view>
								</view>
							</view>
							<view class="finishedMain-type-footer">
								<view class="finishedMain-total">
									<text class="finishedMain-title">收入-</text>
									<text class="value">{{item.collector_total}}回收币</text>
								</view>
								<view class="finishedMain-total">
									<text class="finishedMain-title">利润-</text>
									<text class="value">{{item.collector_profit}}回收币</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<noMore v-if="!hasMore"></noMore>
				<view v-else class="loading">加载中...</view>
			</view>
			<!-- 已回收显示打包 -->
			<view v-if="tabbarIndex==2 && orderList.length!=0" class="dabao">
				<view @tap="pack">
					<view class="dabao-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/bale.png" mode="aspectFill"></image>
					</view>
					<view class="dabao-text">{{ispack?"打包":"一键打包"}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noMore from "@/component/noMore.vue"
	import none from "@/otherPages/none/none.vue"
	import cecyclerOrder from "@/component/cecycler/cecyclerOrder.vue"//列表组件
	import util from "../../component/commen/api/util";
	import popup from "@/component/popup.vue"
	export default {
		components:{
			noMore,none,cecyclerOrder,popup
		},
		data() {
			return {
				topbar: [ //顶部滑块的文字内容
					{
						id: 1,
						name: "待回收"
					},
					{
						id: 2,
						name: "已回收"
					},
					{
						id: 3,
						name: "待打包"
					},
					{
						id: 4,
						name: "已完成"
					}
				],
				tabbarIndex: 1, //选中的索引
				scrollIntoIndex: "top1", //顶栏跟随的索引id
				orderList:[], //页面数据
				ispack:true,//是否显示打包
				selectList:[],//选中的数据
				isPopup:false,//是否显示核销二维码
				qrcodeImg:"",//二维码地址
				page:1,//页
				psize:5,//每页条数
				hasMore:true,//是否还有更多数据
			};
		},
		onLoad(e) {
			this.tabbarIndex = parseInt(e.openId)
			this.scrollIntoIndex = "top"+this.tabbarIndex
			// console.log("当前id",this.tabbarIndex,this.scrollIntoIndex)
		},
		onShow() {
			this.getdataList()
		},
		onReachBottom() {
			this.page++
			this.getdataList()
			console.log("触底加载")
		},
		methods:{
			changTab(e) { //点击头部滑块切换
				// console.log(e)
				this.orderList = []
				if (this.tabbarIndex === e) { //当前页
					return;
				}
				this.tabbarIndex = e
				this.scrollIntoIndex = "top" + e
				this.page = 1
				this.orderList = []
				this.getdataList()
				// console.log("当前id",this.tabbarIndex,this.scrollIntoIndex)
			},
			cancelEnd(){//子组件中点击取消后刷新页面
				console.log("变化啦")
				this.page = 1
				this.orderList = []
				this.getdataList()
			},
			hidePopup(e) { //关闭遮罩，子组件传递数值
				// console.log(e)
				// 子组件传递false过来，关闭弹框
				this.isPopup = e
			},
			updateshoice(value){//修改了orderList中选中状态
				console.log("改变选中状态",value)
				this.orderList = value
			},
			getdataList(){//获取订单数据
				var params = {
					do:"collector",
					op:"reserveLog",
					collectorid:uni.getStorageSync("collectorid"),
					is_status:this.tabbarIndex,
					page:this.page,
					psize:this.psize
				}
				util.requestWithSign(params).then(res=>{
					this.orderList = this.orderList.concat(res.data.list)
					// console.log(this.orderList)
					if(res.data.total==this.orderList.length){//数据已经加载完
						return this.hasMore = false
					}
					console.log("订单数据",this.orderList)
				})
			},
			pack(){//点击打包
				var _this = this
				// 使用 find 方法查找包含特定属性值的对象
				const foundObject = this.orderList.find(obj => obj.ischoice === true);
				
				// 使用 filter 方法筛选符合条件的对象，并记录相应的 id
				const selectList = this.orderList.filter(item => item.ischoice === true);
				const selectId = selectList.map(item => item.id).join(',');
				if(!this.ispack&&selectList.length!=0){
					console.log("选中",selectId)
					var params = {
						do:"collector",
						op:"packOrder",
						orderids:selectId,
						collectorid:uni.getStorageSync("collectorid")
					}
					util.requestWithSign(params).then(res=>{
						// console.log(res)
						if(res.errno==0){
							uni.showModal({
								title:"打包成功！",
								showCancel:false,
								success() {
									_this.page = 1
									_this.orderList = []
									_this.getdataList()
								}
							})
							
						}
					})
				}
				this.ispack = !this.ispack
				console.log(this.ispack)
				if(!this.ispack){//显示一键打包
					this.orderList.forEach(item=>{
						item.ischoice = false
					})
				}
			},
			confirmPack(){//点击一键打包
				console.log(this.orderList)
			},
			qrCode(item){//点击核销二维码
				this.isPopup = true
				this.qrcodeImg = item.qrcode
			}
		}
	}
</script>

<style lang="scss" scoped>
.myTakOrder{
	padding-bottom: 30rpx;
	// 顶部滑块
	.wasteScroll {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
		background: #fff;
	
		// box-shadow: #e3e3e3 0 0 8px;
		.slider {
			box-sizing: border-box;
			display: inline-block;
			// border: 1px solid #000;
			width: 25%;
			text-align: center;
			padding: 20rpx 30rpx;
			font-size: 32rpx;
		}
	
		.f-active-color {
			box-sizing: border-box;
			padding: 10rpx 0;
			border-bottom: 6rpx solid #4fc3a5;
			color: #4fc3a5;
		}
	
		.f-color {
			// color: #ccc;
		}
	
		// .scrollItem-left{
		// 	height:100%;
		// }
	}
	.main-content{
		padding: 0 20rpx;
		box-sizing: border-box;
		.tobePacked{
			.tobePacked-main{
				margin-top: 20rpx;
				background: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				.listItems{
					margin-top: 20rpx;
					text-align: center;
					.line{
						color: #f2f2f2;
					}
				}
				.tobePacked-type{
					padding: 20rpx 0;
					margin-top: 20rpx;
					border-bottom: 2rpx solid #f3f3f3;
					.type-title{
						font-weight: bold;
					}
					.type-content{
						font-size: 25rpx;
						color: #868686;
						margin-top: 20rpx;
						display: flex;
						.num{
							color: #666666;
							font-weight: bold;
						}
						.content-number{
							margin-right: 30rpx;
						}
					}
				}
				.type-footer{
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					.footer-text{
						.sumText{
							color: #868686;
						}
						.profitText{
							margin-top: 20rpx;
							font-weight: bold;
							.cions{
								color: #ffaa00;
							}
						}
					}
					.writeQrcode{
						width: 200rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						background: #00b388;
						color: #fff;
						border-radius: 20rpx;
						margin-left: auto;
					}
				}
			}
		}
		.finished{
			margin-top: 20rpx;
			font-size: 28rpx;
			.finished-main{
				// border-radius: 20rpx;
				.finishedMain-header{
					padding: 20rpx;
					background: #fff;
					border-radius: 20rpx 20rpx 0 0;
					border-bottom: 2rpx solid #f5f5f5;
					.logno{
						
					}
					.time{
						margin-top: 20rpx;
					}
				}
				.finishedMain-content{
					border-radius: 0 0 20rpx 20rpx;
					background: #fff;
					box-sizing: border-box;
					.listItems{
						padding-top: 20rpx;
						text-align: center;
						.line{
							color: #f2f2f2;
						}
					}
					.finishedMain-type{
						padding: 20rpx;
						// margin-top: 20rpx;
						border-bottom: 2rpx solid #f8f8f8;
						.tobePacked-type{
							margin-top: 35rpx;
							// border: 1px solid #000;
							.type-title{
								font-weight: bold;
							}
							.type-content{
								font-size: 25rpx;
								color: #868686;
								margin-top: 20rpx;
								display: flex;
								.num{
									color: #666666;
									font-weight: bold;
								}
								.content-number{
									margin-right: 30rpx;
								}
							}
						}
					}
					.finishedMain-type-footer{
						padding: 30rpx 20rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						.finishedMain-total{
							.finishedMain-title{
							}
							.value{
								font-weight: bold;
								color: #00b388;
							}
						}
					}
				}
				
			}
		}
	}
	.dabao{
		position: fixed;
		bottom: 50rpx;
		left: 40%;
		width: 160rpx;
		height: 160rpx;
		background: #fff;
		border-radius: 50%;
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
		padding-top: 40rpx;
		.dabao-img{
			width: 60rpx;
			height: 60rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.dabao-text{
			font-size: 27rpx;
			display: inline-block;
			margin-top: 10rpx;
		}
	}
}
</style>
